<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <script src="{$oss}/active/newyear/js/rem.js"></script>
    <title>生日祝福</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .content-box {
            width: 100%;
        }

        .content-box .content {
            width: 100%;
            box-shadow: 0.02rem 0.02rem 0.18rem 0 rgba(0, 0, 0, 0.2);
            border-radius: 0.2rem;
            font-size: 0;
        }
        .astro-img{
            width: 100%;
        }
        .wish_btn {
            display: block;
            width: 89.33333%;
            height: 0.9rem;
            line-height: 0.9rem;
            border-radius: 0.45rem;
            text-align: center;
            color: white;
            background-color: #FF6C89;
            font-size: 0.32rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            letter-spacing: 0.03rem;
            margin: 0.9rem auto 0.45rem;
            text-decoration: none;
        }

        a {
            text-decoration: none;
        }

        a:link {
            text-decoration: none;
        }

        a:visited {
            text-decoration: none;
        }

        a:hover {
            text-decoration: none;
        }

        a:active {
            text-decoration: none;
        }

        .avatar {
            width: 1.06rem;
            height: 1.06rem;
            border-radius: 0.53rem;
            position: absolute;
            top: 0.69rem;
            left: 42.93333333%;
        }

        .avatar-icon {
            width: 0.905rem;
            height: 0.817rem;
            background: url("{$oss}/web/static/birthday/wish_icon.png") no-repeat center center;
            background-size: 100%;
            position: absolute;
            left:49.0666666%;
            top: 0.19rem;
        }

        .nickname {
            width: 100%;
            line-height: 0.4rem;
            font-size: 0.3rem;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: rgba(51, 51, 51, 1);
            text-align: center;
            position: absolute;
            left: 0;
            top: 2.04rem;
        }

        .astro-data-txt {
            width: 100%;
            text-align: center;
            font-size: 0.30rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            line-height: 0.40rem;
            position: absolute;
            left: 0;
            top: 2.74rem;
        }

        .astro-desc {
            width: 100%;
            text-align: center;
            font-size: 0.30rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            line-height: 0.40rem;
            position: absolute;
            left: 0;
            top: 3.19rem;
        }

        .textarea-group {
            width: 80%;
            height: 2.17rem;
            position: absolute;
            left: 10%;
            bottom: 0.35rem;
            border-radius: 0.2rem;
            border: 0.01rem solid rgba(204, 204, 204, 1);
        }

        .textarea-group .limit_50 {
            width: 100%;
            height: 2.17rem;
            box-sizing: border-box;
            border-radius: 0.2rem;
            resize: none;
            padding: 0.25rem;
            font-size: 0.30rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            line-height: 0.40rem;
            border: 0;
            outline: none;
        }

        .limit {
            position: absolute;
            right: 0.2rem;
            bottom: 0.05rem;
            font-size: 0.30rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
        }

        textarea:focus, textarea:active {
            border: unset;
            outline: none;
        }

        .message-box {
            width: 100%;
            position: fixed;
            bottom: 3.72rem;
            text-align: center;
            display: none;
            z-index: 1000;
        }

        .message {
            display: inline-block;
            font-size: 0.28rem;
            padding: 0.14rem 0.26rem;
            border-radius: 0.18rem;
            background-color: #6F6F6F;
            color: white;
        }
    </style>
</head>
<body class="content-box">
<div style="position: relative;padding: 1.28rem 5.33333333333% 0">
    <div class="content">
        <div style="width: 1.5rem;height: 0.50rem;background: cyan;border-radius: 0.2rem;box-sizing: border-box;padding: 0.1rem">
            <div style="width: 100%;height: 100%;border: 0.02rem dashed white;text-align: center">热爱生活</div>
        </div>
        <img class="astro-img" src="{$oss}{$astro_img}" alt="">
        <div class="avatar-box">
            <img class="avatar" src="{$oss}{$avatar}" alt="">
            <div class="avatar-icon"></div>
        </div>
        <div class="nickname">{$nickname}</div>
        <div class="astro-data-txt">{$astro_data_text}</div>
        <div class="astro-desc">{$astro_desc}</div>
        <div class="textarea-group">
            <textarea class="limit_50 advice"></textarea>
            <div class="limit statistics">0/50</div>
        </div>
    </div>
</div>
<a class="wish_btn" href="javascript:;">发送祝福</a>
<div class="message-box">
    <div class="message"></div>
</div>
</body>
<script src="{$oss}/active/seven/js/jquery-v2.1.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        var id = 0;
        var oldTxt = '';
        var bind_name = 'input';
        if (navigator.userAgent.indexOf("MSIE") != -1) { //（此处是为了兼容IE）
            bind_name = 'propertychange';
        }
        if (navigator.userAgent.match(/android/i) == "android") {
            bind_name = "keyup";
        }

        $(".limit_50").bind(bind_name, function () {
            var limitSub = $(this).val().substr(0, 50);
            $(this).val(limitSub); //截取字符长度
            $(this).next('.statistics').html(limitSub.length + '/50'); //获取实时输入字符长度并显示
        });
        var k = 1;
        $('.wish_btn').click(function () {
            if (k != 1) {
                return;
            }
            k = 2;
            var txt = $(".limit_50").val();
            var txt1 = txt.trim();

            if (txt1) {
                if (txt === oldTxt) {
                    commonJsToNativeShare('亲爱的，祝你生日快乐', '我准备了一份惊喜，一定要打开看看哟！', '{$domain}/web/birthday/getwishinfo?id=' + id, 5,'common_js_to_native', '分享-生日祝福');
                    k = 1;
                    return;
                }
                $.ajax({
                    url: '/api/v19/birthday_send_wish',
                    type: 'POST',
                    data: {id: id, rid: {$Request.get.rid}, content: txt},
                    dataType: 'json',
                    headers: {$headers},
                    success: function (res) {
                        if (res.code == 200) {
                            k = 1;
                            id = res.data.id;
                            oldTxt = txt;
                            commonJsToNativeShare('亲爱的，祝你生日快乐', '我准备了一份惊喜，一定要打开看看哟！', '{$domain}/web/birthday/getwishinfo?id=' + id, 5, 'common_js_to_native', '分享-生日祝福');
                        } else {
                            setTimeout(function () {
                                k = 1;
                            }, 1500);
                            message(res.msg);
                        }
                    }
                });
            } else {
                message('请输入祝福语！');
            }
        });

        function message(text) {
            $('.message').text(text);
            $('.message-box').show();
            setTimeout(function () {
                k = 1;
                $('.message-box').hide();
            }, 2500);
        }
    })

    var app_type = '{$app_type}'
    var version = '{$version}'

    /**
     * commonJsToNativeShare(title,desc,**url,platform[0：微信；1：微信朋友圈；2：微博；3：qq；4：qq空间]);【注意：banner 跳转的webview 和 服务消息里跳转的webview  要实现的js调用本地分享的方法】
     * @param title
     * @param desc
     * @param url
     * @param platform
     */
    function commonJsToNativeShare(title, desc, url, platform, umeng_event_name, umeng_event_label) {

        switch (app_type) {
            case 'ios':
                window.webkit.messageHandlers.commonJsToNativeShare.postMessage({
                    'title': title,
                    'desc': desc,
                    'url': url,
                    'platform': platform,
                    'umeng_event_name': umeng_event_name,
                    'umeng_event_label': umeng_event_label
                });
                break;
            case 'android':
                console.log('android')
                androidwebview.commonJsToNativeShare(title, desc, url, platform, umeng_event_name, umeng_event_label)
                break;
            default:
                console.log('not ios or android')
        }
    }
</script>
{include file="../apps/web/view/public/sensors.html" /}
<script>
    var cnzz_s_tag = document.createElement('script');
    cnzz_s_tag.type = 'text/javascript';
    cnzz_s_tag.async = true;
    cnzz_s_tag.charset = 'utf-8';
    cnzz_s_tag.src = 'https://w.cnzz.com/c.php?id=1279032874&async=1';
    var root_s = document.getElementsByTagName('script')[0];
    root_s.parentNode.insertBefore(cnzz_s_tag, root_s);
</script>
</html>
